Everything we have covered so far has been about creating pages that can be
viewed. Apart from the basic mailto: link to let visitors send you an email, there
has been no way of generating feedback from visitors to your site. Let's do
something to fix that and look at how you can use forms to generate some two-way
traffic for your site.
Forms use a CGI program (see boxout) to process the data. Most ISPs don't permit
the uploading of custom scripts for home pages, because of security issues, but
they generally provide a set of pre-configured scripts for form and guestbook
handling. You should check with your ISPs technical support or web site for the
exact details you need, for now we will use the formmail.pl script available to
Wirenet subscribers. This is a very popular script used by many ISPs.
Let's get started with a very basic form:
<FORM ACTION="http://www.personal.u-net.com/cgi-bin/formmail.pl" METHOD="POST">
We open the form by specifying the program to handle the form data and the method
used to send it.
Name <INPUT TYPE="TEXT" NAME="name" SIZE=40><BR>
Email <INPUT TYPE="TEXT" NAME="email" SIZE=40>
INPUT is the main tag used in forms, it creates a gadget with which the user can
input information. TYPE="TEXT" tells the browser this is a string input gadget,
SIZE=40 makes it 40 characters wide. The NAME attribute is sent to the script
along with the data in the gadget. If I were to fill this form in with my name and
address the browser would send "name=Neil+Bothwick&email=neil@wirenet.co.uk".
<INPUT TYPE="SUBMIT"> <INPUT TYPE="RESET">
These are two special cases of the INPUT type. Each creates a button, the RESET
button clears the form, the SUBMIT button sends the data to the URL in the ACTION
attribute.
</FORM>
Finally, we close the form container.
This form will send the information the user types to the formmail.pl script but
the script won't know what to do with it. To tell the script what to do with your
data you need some more INPUT tags:
<INPUT TYPE="HIDDEN" NAME="RECIPIENT" VALUE="me@myisp.com">
<INPUT TYPE="HIDDEN" NAME="SUBJECT" VALUE="Results of my first form">
<INPUT TYPE="HIDDEN" NAME="REDIRECT" VALUE="http://www.me.myisp.com/formreceived.html">
You won't be surprised to hear that formmail.pl sends the form contents out by
email, so it needs to know your mail address. This is given in the first line, the
subject for the mail is given in the second and the third line contains the URL of
a page to be sent to the user as confirmation that their submission has been
received. TYPE="HIDDEN" means that these input fields do not appear in the form,
the value they return is given in the VALUE attribute. formmail.pl accepts two
more hidden fields
<INPUT TYPE="HIDDEN" NAME="REQUIRED" VALUE="name,email">
<INPUT TYPE="HIDDEN" NAME="SORT" VALUE="order:name,email">
The first makes certain fields compulsory, the script sends back an error message
if all compulsory fields are not completed. The second gives the order in which
the fields should appear in the mail. This is useful if you want the mail to be
automatically processed by an arexx script.
The INPUT tag can be used to create a number of different input gadgets:
PASSWORD This is the same as TEXT except that the data typed in appears as
asterisks. Note that the data is still sent as plain text, this only
protects it from being read from the screen.
CHECKBOX Creates a checkbox, each one requires NAME and VALUE attributes that
are returned if the box is selected. You may have multiple checkboxes
with the same name and different values, the browser will return the
name and value for each one that is selected.
RADIO Creates a radio button. You would normally have several RADIO tags,
each with the same name and a different value. Only one may be
selected at a time, selecting a second unselects the first.
IMAGE Uses the image specified in the SRC attribute as a submit button. This
returns the coordinates clicked to the script so can be used for more
than just a fancy submit button.
There are several attributes that are applied to these tags:
NAME This is essential for any item that returns a value, otherwise the
value won't be assigned to anything
VALUE This has several meanings, in a TEXT tag it is the default value
placed in the field, with RADIO and CHECKBOX tags it is the value
returned when the gadget is selected. For SUBMIT and RESET buttons it
provides alternative text for the buttons themselves.
SIZE Specifies the width of TEXT and PASSWORD boxes in characters
MAXLENGTH The longest string that can be typed into a TEXT or PASSWORD box. If
MAXLENGTH is larger than SIZE, the text will scroll.
SRC Only used with IMAGE, to give the URL of the image to be used.
ALIGN Only used with IMAGE. Has the same effect as when used in the <IMG> tag.
CHECKED Makes a radio button or checkbox selected
INPUT provides a range of ways of collecting data, but there are two other tags
used within forms. TEXTAREA creates a multiline text box, suitable for free form
text input.
<TEXTAREA NAME="address" ROWS="6" COLS="60"></TEXTAREA>
provides a box of six rows of sixty characters for the user to type their address.
ROWS and COLS set the physical size of the box, it does not restrict how many
characters or rows may actually be typed. Any text between <TEXTAREA> and
</TEXTAREA> appears in the box.
SELECT will render as a cycle gadget. popup menu or list box, depending on its
attributes and the browser used.
<B>What is your main use of your Amiga?</B>
<SELECT NAME="MainUse">
<OPTION>Word processing/DTP
<OPTION>Graphics
<OPTION>Music
<OPTION>Internet
<OPTION>Games
<OPTION>Other
</SELECT>
<BR>
<INPUT TYPE="TEXT" NAME="Other" SIZE="20">
This sets up a SELECT gadget with six choices, the text from whichever option is
selected will be sent as the value, e.g. "MainUse=Internet". This only allows one
item to be selected from the list, for multiple selections add the MULTIPLE
attribute to SELECT. If you do this, you also need to use the SIZE attribute. This
is the length of the list as rendered on screen. It defaults to one, rendering the
list as a cycle gadget or popup menu which is unsuitable for multiple selections.
SIZE=5 will show a list five lines high, with a scrollbar if there are more than
five items.
OPTION can take two attributes. SELECTED makes that option the default. VALUE is
the string to be returned if that option is selected, it defaults to the option
text.
Putting it all together
Listing 1 shows the source for a form using all of the available options, although
it is unlikely you would ever do that on a single form. Since form elements are
rendered among the other HTML of the page, a mix of text and HTML will normally
look quite messy. This example makes use of tables to keep everything aligned.
Figure 1 shows how this HTML is rendered in a browser.
Testing forms
There is a test server running as the National Center for Supercomputing
Applications (NCSA), if you want to see exactly what your form is sending to the
CGI program, temporarily replace the FORM tag with one of these, depending on
whether you are using the GET or POST method.
<FORM ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query" METHOD="POST">
<FORM ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/query" METHOD="GET">
The server will return a page showing the the names and values submitted by your
form. There are also query and post-query programs supplied with Amiga Web Server
(AWS) but it's probably only worth installing this if you are going to be doing a
lot of form testing.
Boxout
======
CGI programs
Forms, and other HTML features, make use of programs running on the web server.
These use the Common Gateway Interface standard, so you'll normally see them
referred to as CGI programs or CGI scripts. A CGI program can be written in any
language the server understands, the two most popular are C (for speed of
execution) and Perl (for speed of development). Perl is an interpreted script
language, mainly used on Unix servers but there is an Amiga version. When you
click on a link to a CGI program the browser sends information to the program,
such as the contents of a form or the coordinates you clicked on. The server then
runs the program and returns the result, usually as HTML. This means that testing
any CGI based pages needs to done online, unless you install a web server and Perl
on your Amiga.
There are two methods used to send the data to the CGI program, POST and GET. GET
is the older method, the data is simply tacked onto the end of the URL, this means
you can only send a small amount of information. POST sends the data separately is
should be used wherever possible. You may see some forms that use a mailto: link
as the action, this is a non-standard action used by Netscape and not supported in
all browsers, it is best to avoid this.
=====================================================================================ยก
Listing 1: A form using most of the available elements
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
<INPUT TYPE="HIDDEN" NAME="RECIPIENT" VALUE="me@myisp.com">
<INPUT TYPE="HIDDEN" NAME="SUBJECT" VALUE="Information request form">
<INPUT TYPE="HIDDEN" NAME="REDIRECT" VALUE="http://www.me.myisp.com/formreceived.html">
<INPUT TYPE="HIDDEN" NAME="REQUIRED" VALUE="name,email">
<INPUT TYPE="HIDDEN" NAME="SORT" VALUE="order:name,email">
<TABLE>
<TR VALIGN=TOP><TD>Name <TD><INPUT TYPE="TEXT" NAME="name" SIZE=40>
<TR VALIGN=TOP><TD>Email address <TD><INPUT TYPE="TEXT" NAME="email" SIZE=40>
</TABLE>
<P>
<TABLE>
<TR VALIGN=TOP><TD><B>Have you ever visited Penketh?</B>
<TD><INPUT TYPE="RADIO" NAME="Visited" VALUE="Yes"> Yes<BR>
<INPUT TYPE="RADIO" NAME="Visited" VALUE="No"> No<BR>
<INPUT TYPE="RADIO" NAME="Visited" VALUE="Resident"> I am resident
</TABLE>
<P>
<TABLE>
<TR VALIGN=TOP><TD><B>Select the items you would like information on</B>
<TD><INPUT TYPE="CHECKBOX" NAME="Info" VALUE="Hotels"> Hotels & Restaurants<BR>
<INPUT TYPE="CHECKBOX" NAME="Info" VALUE="Ent"> Entertainment<BR>
<INPUT TYPE="CHECKBOX" NAME="Info" VALUE="Sport"> Sports facilities<BR>
<INPUT TYPE="CHECKBOX" NAME="Info" VALUE="Events"> Upcoming events
</TABLE>
<P>
<TABLE>
<TR VALIGN=TOP><TD><B>If you would like to receive literature by post, please give your full postal address here</B>
<TD><TEXTAREA NAME="Address" COLS="60" ROWS="6"></TEXTAREA>
</TABLE>
<P>
<TABLE>
<TR VALIGN=TOP><TD><B>Where did you find out about this site?</B>
<TD><SELECT NAME="Where" SIZE=1>
<OPTION>Search engine
<OPTION>Tourist Information
<OPTION>Newspaper or Magazine
<OPTION>Other
</SELECT>
<TR><TD><TD>If Other, please specify<BR>
<INPUT TYPE="TEXT" NAME="Other" SIZE="20">
<TR VALIGN=TOP><TD><B>Would you like to be included on our mailing list?</B>
<TD><INPUT TYPE="CHECKBOX" NAME="maillist" CHECKED> Yes
</TABLE>
<P>
<TABLE WIDTH="70%" ALIGN=CENTER>
<TR ALIGN=CENTER><TD><INPUT TYPE="SUBMIT" VALUE=" Send Form "><TD><INPUT TYPE="RESET" VALUE=" Clear Form ">
</TABLE>
</FORM>
Figure 1: The form from Listing 1
Figure 2: The result of sending the form from Listing 1 to the NCSA form test program